<template>
    <el-container>
      <el-main>
        <div style="height: 405px;display:flex;justify-content:center;align-items: center;">
            <el-form :model="form.model" :inline="true" ref="formRef">
                <el-form-item prop="one" class="input-width">
                    <el-input ref="input1" v-model.number="form.model.one"  type="password" maxlength="1" size="large" ></el-input>
                </el-form-item>
                <el-form-item ref="input2" prop="two" class="input-width">
                    <el-input v-model.number="form.model.two"  type="password" maxlength="1" size="large"></el-input>
                </el-form-item>
                <el-form-item ref="input3" prop="three" class="input-width">
                    <el-input v-model.number="form.model.three"  type="password" maxlength="1" size="large"></el-input>
                </el-form-item>
                <el-form-item ref="input4" prop="four" class="input-width">
                    <el-input v-model.number="form.model.four"  type="password" maxlength="1" size="large"></el-input>
                </el-form-item>
                <el-form-item ref="input5" prop="five" class="input-width">
                    <el-input v-model.number="form.model.five"  type="password" maxlength="1" size="large"></el-input>
                </el-form-item>
                <el-form-item ref="input6" prop="six" class="input-width">
                    <el-input v-model.number="form.model.six"  type="password" maxlength="1" size="large"></el-input>
                </el-form-item>
            </el-form>
        </div>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button
          type="primary"
          @click="confirm"
          >确定</el-button
        >
      </el-footer>
    </el-container>
  </template>
  <script setup>
    import { nextTick, onMounted, reactive, ref, unref } from 'vue';
    import { api } from '../earning.service';
    import { cloneDeep } from 'lodash';
    import { ElMessage } from 'element-plus';
   
   
    const emit = defineEmits(['modalCallBack']);

    const props = defineProps({
      modal: {
        type: Object,
      },
    });

    // 添加 编辑 form
    let formRef = ref(null);
    let input1 = ref(null);
    let input2 = ref(null);
    let input3 = ref(null);
    let input4 = ref(null);
    let input5 = ref(null);
    let input6 = ref(null);
    var count=1

    const form = reactive({
      model: {
        one: '',
        two: '',
        three: '',
        four: '',
        five: '',
        six: '',
      },
    });

    const loading = ref(false);

    // 获取详情
    async function getDetail(id) {
      loading.value = true;
      const { error, data } = await api.questionCategory.detail(id);
      if(error==0){
        form.model = data;
       
      }
  
      loading.value = false;
    }

    function focusNextInput(e,count){
      console.log('e',e.length)
      if(e.length==1){
        input2.value.focus()
      }
      
      
    }

    // 表单关闭时提交
    async function confirm() {

      if(form.data.one==''||form.data.two==''||form.data.three==''||form.data.four==''||form.data.five==''||form.data.six==''){
        ElMessage({
            message:'请输入6位密码'
        });
        return ;
      }

      // 表单验证
      unref(formRef).validate(async (valid) => {
        if (!valid) return;
        let submitForm = cloneDeep(form.model);
        const { error } =
          props.modal.params.type == 'add'
            ? await api.questionCategory.add(submitForm)
            : await api.questionCategory.edit(props.modal.params.id, submitForm);
        if (error == 0) {
          emit('modalCallBack', { event: 'confirm' });
        }
      });
    }



    onMounted(() => {
     
    });
  </script>
  <style lang="scss" scoped>
    .input-width{
      width:40px;
    }
  </style>

